<template>
  <div class="user-container main">

    <div class="question-card">
      <div class="header">
        <span class="dot"></span>
        <span class="title">勘察人信息</span>
      </div>
      <div class="form-content">
        <van-form @submit="submit">
          <div class="form-item-wrapper">
            <div class="label-wrapper">
              <img src="" alt="required-icon" class="required-icon" />
              <span>勘察人姓名</span>
            </div>
            <van-field
              v-model="username"
              class="input-wrapper"
              name="勘察人姓名"
              placeholder="请填写"
              :rules="[{ required: true, message: '请填写' }]"
            />
          </div>
          <div class="form-item-wrapper">
            <div class="label-wrapper">
              <img src="" alt="required-icon" class="required-icon" />
              <span>勘察人电话</span>
            </div>
            <van-field
              v-model="phone"
              class="input-wrapper"
              name="勘察人电话"
              placeholder="请填写"
              :rules="[{ required: true, message: '请填写' }]"
            />
          </div>
        </van-form>
      </div>
    </div><!-- .question-card end -->
    <div class="footer-bar">
      <van-button :loading="loading" size="large" round type="info" loading-text="保存中..." @click="submit">保存</van-button>
    </div>
  </div><!-- .main end -->
</template>
<script>
import { today, getWeek } from '@/utils/helpers'
import { Notify, Dialog } from 'vant'

export default {
  layout: 'blank',
  async asyncData({ app }) {
  },
  data() {
    return {
      loading: false,
      username: '',
      phone: '',
      dailys: {},
      listQuery: {
        page: 1,
        limit: 20
      },
      date: today(),
      day: getWeek()
    }
  },
  computed: {
    rightform_phoneNumber() {
      return /^1\d{10}$/gi.test(this.phone)
    }
  },
  methods: {
    submit(e) {
      console.log('submit', e)
      this.loading = true
      if (!this.username) {
        Notify('请填写勘察人姓名')
        // this.$toast.fail('请填写手机号码')
        this.loading = false
        return
      } else if (!this.rightform_phoneNumber) {
        // this.$toast.fail('勘察人手机号码不正确')
        const _this = this
        _this.loading = true
        Dialog.confirm({ title: '提示', message: '请填写正确的勘察人电话，返回首页后已填数据将清空' }).then(() => {
          _this.$cookies.set('redirectUrl', this.$route.path)
          _this.$router.push({ path: '/' })
        }).catch(() => {})
        _this.loading = false
        return
      }
      Notify('勘查已完成不可编辑')
      this.loading = false
    }
  }
}
</script>
<style lang="scss" scoped>
.user-container{
  box-sizing: border-box;
  padding: 3.2vw;
  .question-card {
    box-sizing: border-box;
    width: 93.6vw;
    padding: 5.33333vw 5.33333vw 1.6vw;
    margin-bottom: 17.06667vw;
    background: #fff;
    border-radius: 3.73333vw;
    .header {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .dot {
        display: block;
        width: 2.66667vw;
        height: 2.66667vw;
        margin-right: 1.6vw;
        background: #0075ff;
        border-radius: .53333vw;
      }
      .title {
        font-size: 4.26667vw;
        font-weight: 600;
        color: #0075ff;
      }

    }
    .form-item-wrapper {
      padding: 4.26667vw 0 2.66667vw;
      position: relative;
      .label-wrapper {
        margin-bottom: 2.13333vw;
        font-size: 4.26667vw;
        font-weight: 500;
        color: #182a41;
        line-height: 5.86667vw;
      }
      .input-wrapper {
        box-sizing: border-box;
        width: 82.93333vw;
        height: 11.73333vw;
        padding: 2.8vw 3.2vw;
        border-radius: 1.6vw;
        border: 1px solid #dfe3eb;
      }
      .required-icon {
        width: 2.13333vw;
        height: 2.13333vw;
        position: absolute;
        left: -2.93333vw;
        top: 5.86667vw;
      }
    }
  }
  .footer-bar {
    position: fixed;
    width: 93.6vw;
    height: 17.06667vw;
    bottom: 0;
  }
}
</style>
